<template>
  <item-title title="基本信息" />

  <el-form
    label-position="right"
    label-width="120px"
    :inline="true"
    class="form-detail"
  >

    <el-row
      :gutter="20"
      style="width:100%"
    >

      <el-col :span="8">
        <el-form-item label="产品通用名：">
          {{ datas.planDetail?.productPopularName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="商品名：">
          {{ datas.planDetail?.productName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="包装规格：">
          {{ datas.planDetail?.packSpecs }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="生产厂家：">
          {{ datas.planDetail?.producer }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="招商类型：">
          <span>{{ getLabel('plan_type', datas.planDetail?.detailPlanType) }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划招商地区：">
          {{ datas.planDetail?.areaName ? datas.planDetail?.cityName + "/" + datas.planDetail?.areaName : datas.planDetail?.cityName ? datas.planDetail?.cityName : datas.planDetail?.provinceName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="代理周期：">
          <span>{{ datas.planDetail?.agentCycle }}年</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="最低销量：">
          <span v-if="datas.planDetail?.isIncrease == 1">{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }}/年</span>
          <span v-else-if="datas.planDetail?.isIncrease == 2">首年{{ datas.planDetail?.minSale }}{{ getLabel('sell_unit',datas.planDetail?.sellUnit) }},每年递增{{ datas.planDetail?.increaseNum }}%</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="销量保证金：">
          <span v-if="datas.planDetail?.sellEarnestMoney">{{ datas.planDetail?.sellEarnestMoney }}元</span>
          <span v-else>未设置</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="其他说明：">
          <span v-if="datas.planDetail?.remark">{{ datas.planDetail?.remark }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="规划结束日期：">
          {{ dateFormat('yyyy-mm-dd',datas.planInfo?.expireTime) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="规划名称：">
          {{ datas.planDetail?.planName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建人：">
          {{ datas.planDetail?.creatorName }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="创建时间：">
          {{ dateFormat('yyyy-mm-dd HH:MM',datas.planDetail?.createdAt) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="发布时间：">
          <span v-if="datas.planInfo?.putTime">{{ dateFormat('yyyy-mm-dd HH:MM',datas.planInfo?.putTime) }}</span>
          <span v-else>无</span>
        </el-form-item>
      </el-col>

    </el-row>

  </el-form>

  <item-title title="推荐代理" />
  <recommendView :datas="datas" />

</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  inject,
  reactive,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'SignedDetail',
  components: {
    recommendView: defineAsyncComponent(() => import('./recommendView.vue')),
  },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    const api = inject('api')
    const currentInstance = getCurrentInstance()
    var data = reactive({
      datas: {
        planInfo: {},
        planDetail: {},
      },
    })

    const getData = (id) => {
      api.plan.PLAN_DETAIL_DETAIL(id).then((res) => {
        if (!res.code) {
          data.datas = res.data
        } else {
          currentInstance.proxy.customMessage({
            type: 'error',
            message: res.msg,
          })
        }
      })
    }

    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          getData(newval)
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
    }
  },
})
</script>

<style scoped>
</style>
